<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>检验超期滚动报表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/element.js"></script>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/element.css">
	</head>
	<body>
    <div id="app">
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">
        <div id="progress" style="height:450px;"></div>
        </div>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
        <div id="contrast" style="height:450px;"></div>
        </div>
        </el-col>
      </el-row>
      <el-table
        ref="table"
        v-loading = "isLoading"
        element-loading-background = "rgba(255, 255, 255, .5)"
        element-loading-text = "加载中，请稍后..."
        element-loading-spinner = "el-icon-loading"
        :data="tableData"
        height="600"
        :header-cell-style="{background:'#5470C6',color:'#000000'}"
        >
        <el-table-column
              type="index">
        </el-table-column>
        <el-table-column
          prop="checkId"
          label="编号">
        </el-table-column>
        <el-table-column
        prop="productGmp"
          label="GMP编码">
        </el-table-column>
        <el-table-column
          label="货品规格">
          <template slot-scope="{row}">
            <p v-html="row.productSpec"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkTypeName"
          label="品类">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="品名">
        </el-table-column>
        <el-table-column
          prop="batchNum"
          label="批号">
        </el-table-column>
        <el-table-column
          label="请验时间">
          <template slot-scope="{row}">
           {{fomatDate(row.registDate)}}
          </template>
        </el-table-column>
        <el-table-column
          label="应出报告时间">
          <template slot-scope="{row}">
           {{fomatDate(row.dueReportDate)}}
          </template>
        </el-table-column>
        <el-table-column
          label="超时检验组"
          >
          <template slot-scope="{row}">
           <span v-for="(group,key) in row.unFinishGroup" :key="key">
              <el-badge :value="group.length" style="margin-top: 10px;">
                <el-popover
                    placement="top-start"
                    :title="key+'未完成检验项'"
                    width="260"
                    trigger="hover"
                    :content="group">
                    <el-button size="mini" slot="reference">{{key}}</el-button>
                  </el-popover>
              </el-badge>
              &nbsp;
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="usedDay"
          label="已用天数">
        </el-table-column>
        <el-table-column
          prop="standCheckDay"
          label="常规检验天数">
        </el-table-column>
        <el-table-column
          label="超期天数">
           <template slot-scope="{row}">
             <span style="color: red;">{{row.overDueDay}}</span>
           </template>
        </el-table-column>
      </el-table>
    </div>
	</body>
</html>

<script>

new Vue({
  el:"#app",
  data(){return{
    isLoading:false,
    tableData:[],
    contrastChart:{},
    progressChart:{},
    progressOption:{
        title: {
          text: '请验进度'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: ['已请验', '待取样', '待收样', '待分样', '检验中', '待结论','已报告']
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,20,20],
            barWidth : 30,
            itemStyle: {
              normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius:[10, 10, 0, 0],
                  label: {
                    show: true,
                    position: 'outside',
                    color:'black',
                  },
                  textStyle:{fontSize:30}
              }
              }
          }
        ]
      },
      contrastOption:{
        title: {
          text: '完成进度'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['成品', '中间品', '原料', '辅料', '包材']
        },
        series: [
          {
            name: '已发起',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
            label: {
              show: true,
              position: 'outside',
              color:'black'
            },
            itemStyle: {
              normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius:[0, 10, 10, 0]
              }
              }
          },
          {
            name: '已完成',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807],
            label: {
              show: true,
              position: 'outside',
              color:'black'
            },
            itemStyle: {
              normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius:[0, 10, 10, 0]
              }
              }
          }
        ]
      }
  }},
  mounted() {
      this.getData()
      window.setInterval(() => {
                  setTimeout(() => {
                      this.getData()
                  },0)
              },300000)
      this.progressChart = echarts.init(document.getElementById('progress'));
      this.contrastChart = echarts.init(document.getElementById('contrast'));
      const table = this.$refs.table
      const divData = table.bodyWrapper
      setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 100)
  },
  methods:{
    fomatDate(val){
      let getDate = new Date(val);
      return getDate.getFullYear()+"年"+(getDate.getMonth()+1)+"月"+getDate.getDate()+"日"
    },
    getData(){
        this.isLoading = true
        let url = '/api/board/init';
        axios.get(url).then(res=>{
          this.progressOption.series[0].data = res.data.data.progress
          this.progressChart.setOption(this.progressOption)
          this.contrastOption.series[1].data = res.data.data.completeContrast
          this.contrastOption.series[0].data = res.data.data.unCompleteContrast
          this.contrastChart.setOption(this.contrastOption)
          this.tableData = res.data.data.delayVos
          this.isLoading = false
        }).catch()
    }
  }
});


</script>
